<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <style>
        div {
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
    <p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
    <pre>
        &lt;article&gt;
            &lt;h1&gt;Article Heading&lt;/h1&gt;
        &lt;/article&gt;
    </pre> 

    <h2>代码</h2>	  
	<span>使用 var 元素表示变量：</span>
    <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
    
    <span>使用 kbd 元素表示按键输入:</span>
    <p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
    
    <span>使用 samp 元素包含电脑输出的内容:</span>
	<p><samp>This text is output from a computer program....</samp></p>
</body>

</html>